<template>
    <a-sub-menu :key="menuItem.key" v-bind="$props" v-on="$listeners"
                :class="{submenu_white:sideBar_Background=='#fafafa'}">
        <span slot="title" :class="{submenu_white:sideBar_Background=='#fafafa'}">
            <rx-use-icon v-model="menuItem.icon"></rx-use-icon>
            <span :title="$i18(menuItem.remarks,'菜单备注')">{{ $i18(menuItem.title, '菜单名称') }}</span>
        </span>
        <template v-if="!collapsed" v-for="(subItem,index) in menuItem.children">
            <template v-if="showSubMenu(subItem)">
                <!--  vue组件自己调用自己  -->
                <sub-Menu :key="subItem.key" :subindex="index" :subpath="subpath2+index+'.'" :menu-item="subItem"
                          :hand-click="handClick"></sub-Menu>
            </template>
            <template v-else>
                <a-menu-item :key="subItem.key" @click="ganclick(subItem,index)">
                    <rx-use-icon v-model="subItem.icon"></rx-use-icon>
                    <span :title="$i18(subItem.remarks,'菜单备注')" :class="{submenu_white:sideBar_Background=='#fafafa'}">{{ $i18(subItem.title, '菜单名称') }}</span>
                </a-menu-item>
            </template>
        </template>
    </a-sub-menu>
</template>

<script>
import {Menu} from 'ant-design-vue';
import {mapState} from "vuex";
import {RxUseIcon} from "@lowcode/jpaas-common-lib"

export default {
    name: 'SubMenu',
    components: {RxUseIcon},
    isSubMenu: true,
    props: {
        ...Menu.SubMenu.props,
        menuItem: {},
        subindex: '',
        subpath: '',
        handClick: {
            type: Function
        }
    },
    data() {
        return {
            customArr: ['customIcon', 'userCustomIcon','jpaasIcon'],
            subpath2: ""
        }
    },
    created() {
        this.subpath2 = this.subpath;
    },
    computed: {
        ...mapState({
            sideBar_Background: (state) => state.appSetting.sideBar_Background,
            collapsed: (state) => state.appSetting.collapsed,
        })
    },
    methods: {
        ganclick(subItem, index) {
            this.subpath2 = this.subpath2 + index;
            var list = this.subpath2.split(".");
            this.handClick(subItem, list, 'double')
        },
        showSubMenu(item) {
            var showType = item.showType;
            if (!item.children || showType == 'FUNS' || showType == 'FUN' || showType == 'FUNS_BLOCK') {
                return false;
            }
            return true;
        }
    }
}
</script>
<style>
.submenu_white > div .ant-menu-submenu-arrow::before, .submenu_white > div .ant-menu-submenu-arrow::after {
    background: #46494d !important;
}

.submenu_white, .submenu_white i, .submenu_white span {
    color: #46494d !important;
}
</style>
